import React  from 'react'
import { TabBar } from 'antd-mobile';
import {Route} from 'react-router-dom'
// 首页
import Home from  './home/index.js'
// 列表找房
import Found from './found'
// 我的
import My from './my'

class HKTabBar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          selectedTab: 'redTab',
          hidden: false,
          fullScreen: false,
        };
      }
    render(){
        return (
            <div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
            <TabBar
              unselectedTintColor="#949494"
              tintColor="#21b97a"
              barTintColor="white"
            >
              <TabBar.Item
               title="首页"
               key="index"
               icon={<i style={{fontSize:24}} className="iconfont icon-ind"></i> }
               selectedIcon={<i style={{color:"#21b97a",fontSize:24}}  className="iconfont icon-ind"></i> }
               selected={this.props.location.pathname === "/home/index"}
                onPress={() => {
                //   console.log(this.props);
                  this.props.history.push("/home/index")
                }}
              >
                <Route path="/home/index" component={Home}  ></Route>
              </TabBar.Item>
              <TabBar.Item
                icon={<i style={{fontSize:24}} className="iconfont icon-findHouse"></i> }
                selectedIcon={<i style={{color:"#21b97a",fontSize:24}}  className="iconfont icon-findHouse"></i> }
                title="找房"
                key="found"
            //   badge={'new'} 
                selected={this.props.location.pathname === "/home/found"}
                onPress={() => {
                //   console.log(this.props);
                  this.props.history.push("/home/found")
                }}
              >
                <Route path="/home/found" component={Found}  ></Route>
              </TabBar.Item>
              <TabBar.Item
                 icon={<i style={{fontSize:24}} className="iconfont icon-my"></i> }
                 selectedIcon={<i style={{color:"#21b97a",fontSize:24}}  className="iconfont icon-my"></i> }
                 title="我的"
                 key="my"
                selected={this.props.location.pathname === "/home/my"}
                onPress={() => {
                  this.props.history.push("/home/my")
                }}
              >
                  <Route path="/home/my" component={My}  ></Route>
              </TabBar.Item>
            </TabBar>
          </div>
        );
      }
    }
    export default HKTabBar;